<template>
	<view class="book-detail-container">
		<nav-bar title="绘本详情"></nav-bar>
		<view class="book-detail-header"> </view>
		<view class="book-detail-body">
			<view class="book-detail-body-top">
				<view class="book-detail-body-title">{{name}}</view>
				<view @click="handleClick" v-if="!selectShow">选择</view>
				<view @click="handleClick" v-if="selectShow">取消</view>
			</view>
			<view class="book-detail-list">
				<view class="book-detail-item" v-for="(item, index) in bookDataList" :key="index"
					@click="handleSelect(index)">
					<image :src="item" mode="widthFix" />
					<view class="book-detail-item-select"
						:class="{ 'book-detail-item-select-active': selectList[index] }" v-if="selectShow">
						√
					</view>
				</view>
				<view class="book-detail-item">
					<image src="../static/zc_bj.png" mode="" @click="zcbj" />
				</view>
			</view>
		</view>
		<view class="book-detail-btn" v-if="selectShow">
			<view @click="handleShare"> 分享 </view>
			<view @click="toChooseAddress">打印</view>
			<view @click="del">删除</view>
		</view>
	</view>
</template>

<script>
	import NavBar from "components/NavBar";
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				bookDataList: [],
				selectShow: false,
				selectList: [],
				id: "",
				name: '',
				list: ''
			};
		},
		onLoad: function(options) {
			var that = this;
			that.id = options.id
			this.books_id = options.books_id
			// this.choose_books()
			this.bookInfo()
		},
		methods: {
			del() {
				var that = this
				var o = {}
				Array.from(this.selectList).forEach(function(value, index, item) {
					if (value) {
						o.video_id = that.list.img_info[index].id
						that.$u.post("folder_books_details_del", o)
					}
				})
				this.bookInfo()
				this.handleClick()
			},
			zcbj(id) {
				var that = this
				uni.navigateTo({
					url: `/pages/editBook?folder_id=${that.id}&edit=true&id=${this.books_id}`
				})

			},
			bookInfo() {
				var that = this
				that.bookDataList = []
				var o = {};
				o.folder_id = this.id
				this.$u.post("folder_books_details", o).then((res) => {
					this.list = res.data
					this.name = res.data.folder_name
					Array.from(res.data.img_info).forEach(function(value, index, item) {
						that.bookDataList.push(value.video_covers)
					})
				});
			},
			handleClick() {
				this.selectShow = !this.selectShow;
				this.selectList = new Array(this.bookDataList.length).fill(false);
			},
			handleSelect(index) {
				this.selectList = new Array(this.bookDataList.length).fill(false);
				let arr = Array.from(this.selectList);
				arr[index] = !arr[index];
				this.selectList = arr;
			},
			toChooseAddress() {
				uni.switchTab({
					url: "/pages/chooseAddress",
				});
			},
			handleShare() {
				uni.share();
			}
		},
	};
</script>

<style scoped>
	page {
		background-color: rgba(255, 210, 80);
	}

	.book-detail-header {
		width: 100%;
		height: 100px;
		background-color: #33cc00;
	}

	.book-detail-body {
		position: relative;
		top: -86px;
		width: 92%;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		background-color: #fff;
		padding: 50rpx 20rpx;
		box-sizing: border-box;
		margin-left: 4%;
	}

	.book-detail-body-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.book-detail-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.book-detail-item {
		position: relative;
		width: 31%;
		display: inline-block;
		float: left;
		/* flex-direction: column;
  justify-content: center;
  align-items: center; */
		margin-top: 20rpx;
		margin-right: 3.5%;
	}

	.book-detail-item image {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.book-detail-list>view:nth-child(3n) {
		margin-right: 0px;
	}

	.book-detail-item-select {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 12rpx;
		right: 4rpx;
		border: 4rpx solid #fff;
		text-align: center;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0);
		font-size: 36rpx;
	}

	.book-detail-item-select-active {
		border: 4rpx solid #999;
		background-color: #fff;
		color: red;
	}

	.book-detail-btn {
		position: absolute;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		background-color: #92d14f;
		display: flex;
	}

	.book-detail-btn view {
		width: 33%;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
	}
</style>
